<template>
    <div>
        <div class="block" style="margin:10px;">
            <span class="demonstration">时间范围查询：</span>
            <el-date-picker
            v-model="time"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </div>
        <el-table
            border
            style="width: 100%" :default-sort = "{prop: 'date'}" @sort-change="changeTable" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)">
            <el-table-column
            fixed
            prop="signInTime"
            label="签到日期"
            sortable="custom"
            width="180" align="center">
            </el-table-column>
            <el-table-column
            prop="empName"
            label="柜员名"
            width="120" align="center">
            </el-table-column>
            <el-table-column
            prop="empId"
            label="柜员号"
            width="120" align="center">
            </el-table-column>
            <el-table-column
            prop="roleName"
            label="角色名"
            width="100" align="center">
            </el-table-column>
            <el-table-column
            prop="desc"
            label="描述"
            width="584" align="center">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,20,50]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
        </el-pagination>
    </div>

</template>

<script>
import Qs from 'qs'
  export default {
    mounted: function(){
        this.getAllEmpSignInLog();//获取所有柜员签到日志
    },
    data() {
      return {
        small:true,//设置分页
        tableData:[],//日志数据
        currentPage:1,
        pagesize:5,
        time: '',//范围时间
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    watch:{
        time:function(n,o){
            var timeArr=n.join(',');
            var data=Qs.stringify({
                "dateTimeArr":timeArr
            })
            this.getAllEmpSignInLogByDate(data);
        }
    },
    methods: {
        getAllEmpSignInLogByDate: function(data){
            this.$axios
            .post('/bk-employee/getAllEmpSignInLogByDate',data,
                    {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                this.tableData=[];
                for(var i=0;i<result.data.data.length;i++){
                    this.tableData.push(
                        result.data.data[i]
                    );
                }
            })
            .catch(failResponse => {})
        },
        handleSizeChange: function (size) {
        this.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
            this.currentPage = currentPage;
        },
        changeTable: function(column) {
            var data=Qs.stringify({
                "sort":column.order
            })
            this.$axios
            .post('/bk-employee/queryBySignTimeDescOrAsc',data,
                    {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                this.tableData=[];
                for(var i=0;i<result.data.data.length;i++){
                    this.tableData.push(
                        result.data.data[i]
                    );
                }
            })
            .catch(failResponse => {})
        },
        getAllEmpSignInLog() {
            this.$axios
            .post('/bk-employee/getAllEmpSignInLog',
                    {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                for(var i=0;i<result.data.data.length;i++){
                    this.tableData.push(
                        result.data.data[i]
                    );
                }
            })
            .catch(failResponse => {})
            }
        },
  }
</script>